<template>
    <div ref="chartRef" style="height: 100%; width: 100%"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  
  const props = defineProps({
    chartData: Object
  })
  
  const chartRef = ref(null)
  let chartInstance = null
  
  const initChart = () => {
    chartInstance = echarts.init(chartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [{
        name: '库存分类',
        type: 'pie',
        radius: '50%',
        data: props.chartData.labels.map((label, index) => ({
          name: label,
          value: props.chartData.datasets[0].data[index]
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
  
    chartInstance.setOption(option)
  }
  
  onMounted(() => {
    initChart()
    window.addEventListener('resize', () => chartInstance.resize())
  })
  
  watch(() => props.chartData, () => {
    chartInstance.setOption({
      series: [{
        data: props.chartData.labels.map((label, index) => ({
          name: label,
          value: props.chartData.datasets[0].data[index]
        }))
      }]
    })
  })
  </script>